<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>奇妙园画图游戏六岁</title>
    <script src="../../js/jquery-2.2.4.min.js"></script>
    <script src="../../js/getrequest.js"></script>
    <script src="../../js/HGame.js"></script>
    <link rel="stylesheet" href="../../css/currency.css">
    <style>
        .section{
            width: 1080px;
            height: 1920px;
            overflow: hidden;
            position: relative;
            background: url("../../img/draw6/draw6.jpg") no-repeat;
        }
        .section:before{
            content: "";
            width: 160%;
            height: 90%;
            background:
                    linear-gradient(36deg, #FFF8A2 42.34%, transparent 42.34%) 0 0,
                    linear-gradient(72deg, #FFFFFF 75.48%, transparent 75.48%) 0 0,
                    linear-gradient(-36deg, #FFF8A2 42.34%, transparent 42.34%) 100% 0,
                    linear-gradient(-72deg, #FFFFFF 75.48%, transparent 75.48%) 100% 0,
                    linear-gradient(36deg, transparent 57.66%, #FFFFFF 57.66%) 100% 100%,
                    linear-gradient(72deg, transparent 24.52%, #FFFA99 24.52%) 100% 100%,
                    linear-gradient(-36deg, transparent 57.66%, #FFFFFF 57.66%) 0 100%,
                    linear-gradient(-72deg, transparent 24.52%, #FFFA99 24.52%) 0 100%,
                    #FFF8A2 linear-gradient(#FFFF8E, #FFFFFF) 50% 100%;
            background-repeat: no-repeat;
            background-size: 50% 50%;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            transform: translateX(-50%) translateY(-50%) scale(0) rotate(360deg);
            transition: all 0.3s ease 0s;
        }
        .src_before:before{
            opacity: 0.5;
            transform: translateX(-50%) translateY(-50%) scale(1.5) rotate(-360deg);
        }
        .section:after{
            content: "";
            width: 160%;
            height: 90%;
            background: radial-gradient(rgba(255,255,255,0.9),transparent,transparent);
            position: absolute;
            top: 0;
            left: -35%;
            opacity: 0;
            pointer-events: none;
        }
        .sec_after:after{ opacity: 1; }
        #boxRender{
            position: absolute;
            width: 874px;
            height: 734px;
            left: 94px;
            top: 421px;
        }
        .colorSelect .item{
            width:43px;
            height:94px;
            border-radius:0px 14px 14px 0px;
            position: absolute;
        }
        .imgShowRow .item{
            width: 186px;
            height: 231px;
            position: absolute;
        }
        #nowSelectColor{
            width: 135px;
            height: 55px;
            position: absolute;
            left: 895px;
            top: 1625px;
            background-color: #93E193;
        }
        .brush{
            width:145px;
            height:208px;
            position: absolute;
            left: 890px;
            top: 1490px;
            background: url("../../img/draw6/brush.png") no-repeat;
        }
        .complete{
            width:285px;
            height:110px;
            position: absolute;
            left: 749px;
            top: 1773px;
            outline: none;
            border: none;
            background: transparent;
        }
        #boxRender canvas{
            border-radius:15px;
        }
        .countdown{
            width: 285px;
            height: 36px;
            font-size: 36px;
            text-align: center;
            font-family: DFHaiBaoGB-W12;
            font-weight: normal;
            color: rgba(255,255,255,1);
            line-height: 36px;
            letter-spacing: 2px;
            position: absolute;
            left: 140px;
            top: 1810px;
        }
    </style>
</head>
<body>
<div class="commit_head">
    <img src="../../img/icon.gif" alt="" class="commit_icon"/>
    <span class="commit_build">熊孩子点吧</span>
    <img src="../../img/close.png" alt="" class="commit_close"/>
</div>
<div class="section">
    <div id="boxRender">

    </div>
    <div class="imgShowRow">
        <div onclick="changeDraw(0);img1();" style=" background-image: url('../../img/draw6/1.png');left: 39px;top: 1249px;" class="item img1"></div>
        <div onclick="changeDraw(1);img2();" style=" background-image: url('../../img/draw6/22.png');left: 242px;top: 1249px" class="item img2"></div>
        <div onclick="changeDraw(2);img3();" style=" background-image: url('../../img/draw6/33.png');left: 445px;top: 1249px;" class="item img3"></div>
        <div onclick="changeDraw(3);img4();" style=" background-image: url('../../img/draw6/44.png');left: 648px;top: 1249px;" class="item img4"></div>
        <div onclick="changeDraw(4);img5();" style=" background-image: url('../../img/draw6/55.png');left: 851px;top: 1249px;" class="item img5"></div>
    </div>
    <div id="nowSelectColor">

    </div>
    <div class="brush"></div>
    <div id="colorSelect" class="colorSelect">
        <div class="item" data-r="147" data-g="225" data-b="147" style="background:rgb(147,225,147);left: 96px;top: 1579px;"></div>
        <div class="item" data-r="209" data-g="233" data-b="121" style="background:rgb(209,233,121);;left: 162px;top: 1579px;"></div>
        <div class="item" data-r="255" data-g="227" data-b="94" style="background:rgb(255,227,94);left: 228px;top: 1579px;"></div>
        <div class="item" data-r="250" data-g="170" data-b="107" style="background:rgb(250,170,107);left: 293px;top: 1579px;"></div>
        <div class="item" data-r="100" data-g="162" data-b="245" style="background:rgb(100,162,245);left: 359px;top: 1579px;"></div>
        <div class="item" data-r="152" data-g="235" data-b="253" style="background:rgb(152,235,253);left: 425px;top: 1579px;"></div>
        <div class="item" data-r="253" data-g="116" data-b="116" style="background:rgb(253,116,116);left: 491px;top: 1579px;"></div>
        <div class="item" data-r="254" data-g="116" data-b="142" style="background:rgb(254,116,142);left: 557px;top: 1579px;"></div>
        <div class="item" data-r="109" data-g="66" data-b="26" style="background:rgb(109,66,26);left: 623px;top: 1579px;"></div>
        <div class="item" data-r="169" data-g="109" data-b="61" style="background:rgb(169,109,61);left: 688px;top: 1579px;"></div>
        <div class="item" data-r="223" data-g="222" data-b="220" style="background:rgb(223,222,220);left: 754px;top: 1579px;"></div>
        <div class="item" data-r="255" data-g="255" data-b="255" style="background:rgb(255,255,255);left: 819px;top: 1579px;"></div>
    </div>
    <button class="complete"></button>
    <div class="countdown">倒计时：<span class="time">120</span>秒</div>
</div>
<audio src="../../audio/success.wav" id="success" type="audio/mpeg"></audio>
<script src="../../js/draw6/data.js" ></script>
<script type="text/javascript">
$(function () {
    /*设置显示的时间*/
    var count = 120;
    $('.time').html(count);
    /*设置定时器，1s一次*/
    var setV = setInterval(function () {
        count--;
        $('.time').html(count);
        /*判断当count的值小于0的时候游戏时间到，并关闭定时器*/
        if (count <= 0) {
            var mark = Math.ceil(zongshu/cishu);
            $("#success").get(0).play();
            setTimeout(function () {
                $(".section").addClass("src_before");
                $(".section").addClass("sec_after");
            }, 500);
            setTimeout(function () {
                window.location.href = "./result.html?id=" + id+"&mark="+mark;
            }, 1000);
            /*关闭定时器*/
            clearInterval(setV);
        }
    },1000);
});
var a=GetRequest();
var id=a['id'];
if(id == "draw3"||id == "draw6"){
    $(".commit_build").html("画一画");
}else if(id == "line3"||id == "line6"){
    $(".commit_build").html("连一连");
}else if(id == "word3"||id == "word6"){
    $(".commit_build").html("找一找");
}
var zongshu = 0;
var cishu = 1;
//点击确认
$(".complete").click(function(){
    var mark = Math.ceil(zongshu/cishu);
    $("#success").get(0).play();
    setTimeout(function () {
        $(".section").addClass("src_before");
        $(".section").addClass("sec_after");
    }, 500);
    setTimeout(function () {
        window.location.href = "../../result.html?id=" + id+"&mark="+mark;
    }, 1000);
});
var canvas = new HGAME.canvas();
var testBox=document.getElementById('boxRender');
testBox.appendChild(canvas.dom);
var animate=new HGAME.animate({
    action:function(){
        canvas.render();
    }
});
var colorObj={
    r:147,
    g:225,
    b:147
};
function initColor(){
    var item = $('.colorSelect .item');
    for(var i=0;i<item.length;i++){
        item[i].onclick=function(){
            for(var a=0;a<item.length;a++){
                item[a].innerHTML="";
            }
            document.getElementById("nowSelectColor").style.backgroundColor="rgba("+this.getAttribute("data-r")+","+this.getAttribute("data-g")+","+this.getAttribute("data-b")+","+"1)";
            colorObj.r=this.getAttribute("data-r");
            colorObj.g=this.getAttribute("data-g");
            colorObj.b=this.getAttribute("data-b");
        }
    };
}
initColor();
/*创建img数据*/
function changeImgColor(img,r,g,b){
    var c=document.createElement("canvas");
    var txt= c.getContext("2d");
    c.width=img.width;
    c.height=img.height;
    txt.drawImage(img,0,0);
    var data=txt.getImageData(0,0, c.width, c.height);
    for(var q=0;q<data.data.length;q+=4){
        if(data.data[q+3]>100){
            data.data[q]=r;
            data.data[q+1]=g;
            data.data[q+2]=b;
        }
    }
    txt.putImageData(data,0,0);
    return c;
}
var div=document.createElement("div");
function changeDraw(num){
    /*加载数据*/
    var source=new HGAME.source({
        loadCall:function(num,allNum){
            div.innerHTML="加载资源"+num+"/"+allNum;
            div.setAttribute("class","tool");
            testBox.appendChild(div);
        },
        loaded:function(){
            testBox.removeChild(div);
            var img=new HGAME.Object2D({
                img:this.data[0],
                w:874,
                h:734,
                x:0,
                y:0
            });
            canvas.child=new Array();
            canvas.add(img);

            var THIS = this;
            img.child=new Array();
            each(this.data,function(intX){
                if(intX>=1){
                    img.add(new HGAME.Object2D({
                        x:whxyInfo[num][intX-1].x,
                        y:whxyInfo[num][intX-1].y,
                        w:whxyInfo[num][intX-1].w,
                        h:whxyInfo[num][intX-1].h,
                        img:THIS.data[intX],
                        isClick:true,
                        clickFun:function(){
                            if(typeof this.bufferImg=="undefined"){
                                this.bufferImg=this.img;
                                this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
                                console.log(111);
                                zongshu++;
                            }else{
                                this.img=changeImgColor(this.bufferImg,colorObj.r,colorObj.g,colorObj.b);
                            }
                        }
                    }));
                }
            });
            animate.stop();
            animate.run();
        },
        data:data[num]
    });

}
changeDraw(0);
function img1() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw6/1.png')");
    $(".img2").css("background-image","url('../../img/draw6/22.png')");
    $(".img3").css("background-image","url('../../img/draw6/33.png')");
    $(".img4").css("background-image","url('../../img/draw6/44.png')");
    $(".img5").css("background-image","url('../../img/draw6/55.png')");
}
function img2() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw6/11.png')");
    $(".img2").css("background-image","url('../../img/draw6/2.png')");
    $(".img3").css("background-image","url('../../img/draw6/33.png')");
    $(".img4").css("background-image","url('../../img/draw6/44.png')");
    $(".img5").css("background-image","url('../../img/draw6/55.png')");
}
function img3() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw6/11.png')");
    $(".img2").css("background-image","url('../../img/draw6/22.png')");
    $(".img3").css("background-image","url('../../img/draw6/3.png')");
    $(".img4").css("background-image","url('../../img/draw6/44.png')");
    $(".img5").css("background-image","url('../../img/draw6/55.png')");
}
function img4() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw6/11.png')");
    $(".img2").css("background-image","url('../../img/draw6/22.png')");
    $(".img3").css("background-image","url('../../img/draw6/33.png')");
    $(".img4").css("background-image","url('../../img/draw6/4.png')");
    $(".img5").css("background-image","url('../../img/draw6/55.png')");
}
function img5() {
    cishu++;
    $(".img1").css("background-image","url('../../img/draw6/11.png')");
    $(".img2").css("background-image","url('../../img/draw6/22.png')");
    $(".img3").css("background-image","url('../../img/draw6/33.png')");
    $(".img4").css("background-image","url('../../img/draw6/44.png')");
    $(".img5").css("background-image","url('../../img/draw6/5.png')");
}
//点击关闭
$(".commit_close").click(function(){
    //调用安卓方法
    JsBinder.onFinishActivity();
})
JsBinder.setActivityClose(false); //隐藏浏览器右上角关闭图表
</script>
</body>

</html>